<template>
  <div class="container">
    <FlipCard :pages="stackList" @click="handleCardClick" ref="flipCard" />

    <div class="actions">
      <button @click="swipeLeft">
        <i class="iconfont icon-unlike"></i> 拒绝
      </button>
      <button @click="swipeRight">
        <i class="iconfont icon-like"></i> 喜欢
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import FlipCard from '~/components/FlipCard/FlipCard.vue'
import type { PageItem } from '~/components/FlipCard/FlipCard.vue'

const stackList = ref<PageItem[]>([
  {
    avatar: 'https://example.com/avatar1.jpg',
    name: '放荡不羁爱自由',
    sex: 'female',
    age: 23,
    starsign: '天秤座',
    distance: '艺术/健身',
    photos: ['https://picsum.photos/320/450?random=1'],
    sign: '交个朋友，非诚勿扰'
  },
  {
    avatar: 'https://example.com/avatar2.jpg',
    name: '旅行达人',
    sex: 'male',
    age: 28,
    starsign: '射手座',
    distance: '旅行/摄影',
    photos: ['https://picsum.photos/320/450?random=2'],
    sign: '世界那么大，一起去看看'
  },
  {
    avatar: 'https://example.com/avatar3.jpg',
    name: '文艺青年',
    sex: 'female',
    age: 25,
    starsign: '双鱼座',
    distance: '阅读/写作',
    photos: ['https://picsum.photos/320/450?random=3'],
    sign: '生活不止眼前的苟且'
  },
  {
    avatar: 'https://example.com/avatar4.jpg',
    name: '科技爱好者',
    sex: 'male',
    age: 30,
    starsign: '水瓶座',
    distance: '科技/编程',
    photos: ['https://picsum.photos/320/450?random=4'],
    sign: '探索未知的世界'
  }
])

const flipCard = ref<InstanceType<typeof FlipCard> | null>(null)

const handleCardClick = (index: number) => {
  console.log('点击卡片:', index)
}

const swipeLeft = () => {
  flipCard.value?.prev()
}

const swipeRight = () => {
  flipCard.value?.next()
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background: linear-gradient(to right, #00e0a1, #00a1ff);
  min-height: 100vh;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

.actions {
  margin-top: 30px;
  display: flex;
  gap: 40px;
}

button {
  padding: 12px 32px;
  font-size: 16px;
  border-radius: 30px;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease, background 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

button:hover {
  transform: translateY(-3px);
}

button:active {
  transform: scale(0.95);
}

button:first-child {
  background: white;
  color: #ff4757;
}

button:first-child:hover {
  background: #fff0f0;
}

button:last-child {
  background: white;
  color: #1e90ff;
}

button:last-child:hover {
  background: #f0f8ff;
}

.iconfont {
  font-size: 18px;
}
</style>